<script lang="tsx">
import { type PaginationProps, ElPagination } from 'element-plus';
import type { PaginationPropsType } from '../types/pagination';
import { defineComponent, type PropType, ref, watch } from 'vue';
import { isBoolean } from 'lodash-es';
export default defineComponent({
  name: 'VxeTablePagination',
  props: {
    getPaginationInfo: {
      type: [Object, Boolean] as PropType<PaginationPropsType | PaginationProps | boolean>,
    },
    fetch: {
      type: Function,
      required: true,
    },
    setPagination: { type: Function, required: true },
  },
  setup(props, { slots }) {
    let currentPage = ref<number>(1);
    let pageSize = ref<number>(10);

    watch(
      () => props.getPaginationInfo,
      () => {
        if (!isBoolean(props.getPaginationInfo)) {
          currentPage.value = (props.getPaginationInfo as PaginationProps).currentPage as number;
        }
        if (!isBoolean(props.getPaginationInfo)) {
          pageSize.value = (props.getPaginationInfo as PaginationProps).pageSize as number;
        }
      },
      { immediate: true },
    );

    function handleCurrentChange(e: number) {
      // console.log("eeeeeee...", e)
      props.setPagination({
        currentPage: e,
      });
      props.fetch();
    }
    function handleSizeChange(e: number) {
      // console.log("eeeeeee...", e)
      props.setPagination({
        pageSize: e,
        currentPage: 1,
      });
      props.fetch();
    }
    function RenderPagination() {
      const { getPaginationInfo } = props;
      // console.log('slots', slots);

      const totalSlot = slots.totalSlot ? slots.totalSlot() : null;
      // console.log('totalSlot', totalSlot);

      return (
        <div class="flex items-center justify-between pt-[16px] ">
          <div class="flex items-center">{totalSlot}</div>

          <ElPagination
            v-model:currentPage={currentPage.value}
            v-model:pageSize={pageSize.value}
            pageSizes={(getPaginationInfo as PaginationProps).pageSizes}
            layout={(getPaginationInfo as PaginationProps).layout}
            total={(getPaginationInfo as PaginationProps).total || 0}
            background={true}
            onCurrent-change={handleCurrentChange}
            onSize-change={handleSizeChange}
          />
        </div>
      );
    }

    return () => {
      const { getPaginationInfo } = props;
      let isGetPaginationInfoBool = isBoolean(getPaginationInfo);
      return <>{isGetPaginationInfoBool ? null : RenderPagination()}</>;
    };
  },
});
</script>
<style lang="scss" scoped>
// ::v-deep(.btn-prev) {
//   border-radius: 4px;
//   width: 32px;
//   height: 32px;
// }
// ::v-deep(.btn-next) {
//   border-radius: 4px;
//   width: 32px;
//   height: 32px;
// }
// ::v-deep(.el-pager) {
//   > li {
//     border-radius: 4px;
//     width: 32px;
//     height: 32px;
//   }
// }
// ::v-deep(.el-pagination__sizes) {
//   .el-select__wrapper {
//     height: 32px;
//     width: 114px !important;
//     border-radius: 4px;
//   }
// }
// ::v-deep(.el-pagination__jump) {
//   .el-pagination__goto {
//     display: none;
//   }
//   .el-pagination__classifier {
//     font-weight: 400;
//     font-size: 14px;
//   }
//   &::before {
//     content: "跳转到";
//     font-weight: 400;
//     font-size: 14px;
//     margin-right: 10px;
//   }
//   .el-input__wrapper {
//     height: 32px;
//     border-radius: 4px;
//   }
// }
</style>
